<template>
  <a-space>
    <template v-for="(item, i) in filterItem" :key="i">
      <div class="filter-item">
        <template v-if="item.type == 'input_search'">
          <a-input-search v-model="item.value" :style="{ width: item.width + 'px' }" :placeholder="item.placeholder || item.label" allow-clear @press-enter="searchByVal" @clear="searchByVal" @search="searchByVal" />
        </template>
        <template v-else-if="item.type == 'select_multiple'">
          <selectMultiple :key="item.key" :info="item" :defaultVal="item.value" @change="selectMulVal($event, item)" />
        </template>
        <template v-else-if="item.type == 'select'">
          <a-select v-model="item.value" :style="{ width: item.width + 'px' }" :placeholder="item.placeholder || item.label" allow-clear @change="searchByVal">
            <a-option v-for="(option, s) in item.optionItems" :key="s" :value="option.value" :label="option.label" />
          </a-select>
        </template>
        <template v-else-if="item.type == 'date_range'">
          <a-range-picker v-model="item.value" :="item.attrs" shortcuts-position="left" :shortcuts="rangeShortcuts()" :style="{ width: item.width + 'px' }" @change="searchByVal" />
        </template>
      </div>
    </template>
    <div class="filter-item">
      <a-button @click="resetAll">重置</a-button>
    </div>
  </a-space>
  <AdLogTable ref="adLogTableRef" :searchParams="searchParam" />
</template>
<script lang="ts" setup>
  import { ref, onMounted, nextTick } from 'vue'
  import { FilterTableItem } from '@/types/components'
  import AdLogTable from './adLogTable.vue'
  import { getStartAndEndTime, rangeShortcuts } from '@/utils/timeFormat'
  const props = defineProps({
    currentData: {
      type: Object,
      default: () => {},
    },
    entityTypes: {
      type: Array,
      default: () => [],
    },
  })
  onMounted(() => {
    searchByVal()
  })
  const adLogTableRef = ref()
  const searchParam = ref<any>({})
  const filterItem = ref<Array<FilterTableItem>>([
    {
      key: 'changeTypes',
      label: '操作类型',
      value: ref(),
      type: 'select_multiple',
      width: 160,
      optionItems: [
        {
          label: '创建',
          value: 'CREATED',
        },
        {
          label: '预算金额调整',
          value: 'BUDGET_AMOUNT',
        },
        {
          label: '调整是否在预算中',
          value: 'IN_BUDGET',
        },
        {
          label: '状态',
          value: 'STATUS',
        },
        {
          label: '结束时间',
          value: 'END_DATE',
        },
        {
          label: '开始时间',
          value: 'START_DATE',
        },
        {
          label: '调整投放位置组',
          value: 'PLACEMENT_GROUP',
        },
        {
          label: '调整竞价策略',
          value: 'SMART_BIDDING_STRATEGY',
        },
        {
          label: '默认竞价调整',
          value: 'DEFAULT_BID_AMOUNT',
        },
        {
          label: '名称调整',
          value: 'NAME',
        },
      ],
    },
    {
      key: 'entityTypes',
      label: '实体类型',
      value: ref(props.entityTypes),
      type: 'select_multiple',
      width: 140,
      optionItems: [
        {
          label: '广告活动',
          value: 'CAMPAIGN',
        },
        {
          label: '广告组',
          value: 'AD_GROUP',
        },
        {
          label: '商品投放',
          value: 'PRODUCT_TARGETING',
        },
        {
          label: '关键词',
          value: 'KEYWORD',
        },
        {
          label: '否定关键词',
          value: 'NEGATIVE_KEYWORD',
        },
        {
          label: '广告商品',
          value: 'AD',
        },
        {
          label: '广告组合',
          value: 'PORTFOLIO',
        },
      ],
    },
    {
      key: 'systemOperation',
      label: '操作系统',
      value: ref(),
      type: 'select',
      width: 140,
      optionItems: [
        {
          label: 'SAAS',
          value: 'Saas',
        },
        {
          label: '亚马逊',
          value: 'Amazon',
        },
      ],
    },
    {
      key: 'createUser',
      label: '操作人',
      value: ref(),
      type: 'input_search',
      width: 160,
    },
    {
      key: 'date',
      label: '日期',
      value: ref(getStartAndEndTime('last_90_days')),
      type: 'date_range',
      width: 240,
      attrs: {
        placeholder: ['开始日期', '结束日期'],
      },
    },
  ])

  // 批量选择数据
  function selectMulVal(searchVal: any, item: any) {
    item.value = searchVal
    searchByVal()
  }
  function resetAll() {
    filterItem.value.forEach((el: FilterTableItem) => {
      if (el.key == 'date') {
        el.value = ref(getStartAndEndTime('last_90_days'))
      } else if (el.key == 'entityTypes') {
        el.value = ref(props.entityTypes)
      } else {
        el.value = ref()
      }
    })
    searchByVal()
  }
  // 开始查询
  function searchByVal() {
    searchParam.value = {
      shopId: props.currentData?.shopId,
      campaignId: props.currentData?.campaignId,
    }
    filterItem.value.forEach((el: FilterTableItem) => {
      if (el.key == 'date') {
        searchParam.value.startDate = el.value?.[0]
        searchParam.value.endDate = el.value?.[1]
      } else {
        searchParam.value[el.key] = el.value
      }
    })
    nextTick(() => {
      adLogTableRef.value.getTableListByVal()
    })
  }
</script>

<style lang="less" scoped></style>
